<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }

        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: skyblue;
            right: 30px;
            bottom: 100px;
            display: none;
        }

        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        /*
          scrollTop: 设置或返回元素被卷去的头部
        */
       $(function(){
        //  1.可以直接设置卷去的距离
           $(document).scrollTop(100);
           
        //  2.获去
        console.log($(document).scrollTop());

        // 据顶部距离
        var boxTop = $('.container').offset().top;
        // console.log(boxTop);
        // window 的 滚动事件
        $(window).scroll(function(){
            // console.log(1);
            // 文档滚动的距离
            console.log($(document).scrollTop());
            if($(document).scrollTop() >= boxTop){
                $('.back').fadeIn();
            } else{
                $('.back').fadeOut();
            }
        });
       // 返回顶部
       $('.back').click(function () {
                // 直接跳转，无缓慢动画
                // $(document).scrollTop(0);

                // 动画效果
                $('body, html').stop().animate({
                    scrollTop: 0
                });

                // 不能是文档，只能是元素做动画
                // $(document).stop().animate({
                //     scrollTop:0
                // });
            });
        });
    </script>
</body>
</html>